<template>
  <div class="root">
    <wux-toptips id="wux-toptips" />
    <div class="root_son">
      <wux-spin nested :spinning="detailSpinning">
        <wux-toptips id="wux-toptips" />
        <img
          :src="product.img !== '' ? product.img : defaultImg"
          class="product_pic"
        />
        <div class="item_name">
          <div class="item_name_outer">
            <h2>{{ product.title }}</h2>
            <div class="item_name_container">
              <div class="item_name_body">
                <div class="item_name_body_item">
                  <span class="title">商品押金：</span>
                  <span class="amount">
                    <span class="val">{{ product.price }}</span
                    >元
                  </span>
                </div>
                <div class="item_name_body_item">
                  <span class="title">租赁费用：</span>
                  <span class="amount">
                    <span class="val">{{ product.timeoutPay }}</span
                    >元 / {{ product.cycleVal }}
                  </span>
                </div>
                <div class="item_name_body_item">
                  <span class="title">免费时长：</span>
                  <span class="amount">
                    <span class="val">{{ product.freeCount }}</span
                    >{{ product.cycleVal }}
                  </span>
                </div>
              </div>
              <div class="item_name_body pull-right">
                <div class="item_name_body_item">
                  <span class="title">总量</span>
                  <span class="amount">
                    <span class="val">{{ product.amount }}</span>
                  </span>
                </div>
                <div class="item_name_body_item">
                  <span class="title">可租</span>
                  <span class="amount">
                    <span class="val">{{ product.useAmount }}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="profile">
          <div class="profile_outer">
            <h2>租赁流程介绍</h2>
            <div class="content">
              <span v-html="leaseComment"></span>
            </div>
          </div>
        </div>
        <div class="profile">
          <div class="profile_outer">
            <h2>商品简介</h2>
            <div class="content">
              <span v-html="product.comment"></span>
            </div>
          </div>
        </div>
      </wux-spin>
      <div class="spend">
        <div class="Shopping_btn">
          <div
            class="buy_now"
            @click="buyNow"
          >
            立即租用
          </div>
          <!-- <div
            v-if="memberLevel === '0'"
            class="btn-become-member"
            @click="becomeMember"
          >
            会员尊享
          </div>
          <div
            v-else
            :class="btnSetGrey ? 'buy_now set-grey' : 'buy_now'"
            @click="buyNow"
          >
            立即租用
          </div> -->
        </div>
        <div class="float_left addShopping">
          <!-- <i class="shopping_num">0</i> -->
        </div>
      </div>
    </div>
  </div>
</template>  


<script>
import lease from "@/api/lease";

import { pay } from "@/api/pay";

import { $wuxToptips } from "../../static/wux/index";

export default {
  data() {
    return {
      product: {},
      detailSpinning: false,
      defaultImg: '/static/images/unknown.png',
      btnSetGrey: false,
      leaseComment: "",
      memberLevel: 0
    };
  },
  mounted() {
    wx.showShareMenu();
    if (JSON.stringify(this.$store.state.user) === "{}") {
      wx.showModal({
        title: "提示",
        content: "请先登录",
        success: function (res) {
          if (res.confirm) {
            wx.redirectTo({
              url: "/pages/login"
            });
          }
        }
      });
      return false;
    }

    this.memberLevel = this.$store.state.user.memberLevel;

    this.$nextTick(function () {
      this.getLease(this.$store.state.productId);
      this.getLeaseComment();
    });
  },
  methods: {
    pay,
    becomeMember() {
      this.$store.dispatch("saveLocatePage", this.$route.path);
      wx.redirectTo({
        url: "/pages/memberDetail"
      });
    },
    buyNow() {
      if (this.btnSetGrey) {
        return false;
      }
      if (JSON.stringify(this.$store.state.shop) === "{}") {
        wx.showModal({
          title: "提示",
          content: "请先选择门店",
          success: function (res) {
            if (res.confirm) {
              wx.redirectTo({
                url: "/pages/shopList"
              });
            }
          }
        });
        return false;
      }
      if (JSON.stringify(this.product) === "{}") {
        return false;
      }
      let goodsNum = [];
      let tempProduct = JSON.parse(JSON.stringify(this.product));
      tempProduct.amount = 1;
      goodsNum.push(tempProduct);
      //target: 3 租赁商品
      let body = {
        totalPrice: tempProduct.price,
        totalNum: 1,
        goodsNum: goodsNum,
        target: 3
      };
      this.$store.dispatch("addSubmitGoods", body);
      this.$store.dispatch("saveLeaseInfo", true);
      this.$router.push({ path: "/pages/SubmitOrder" });
    },
    getLeaseComment() {
      this.detailSpinning = true;
      const self = this;
      this.$http
        .request({
          url: lease.getLeaseComment,
          method: "POST",
          body: {
          }
        })
        .then(res => {
          this.detailSpinning = false;
          this.leaseComment = res.content
        });
    },
    getLease(id) {
      this.detailSpinning = true;
      const self = this;
      this.$http
        .request({
          url: lease.getLease,
          method: "POST",
          body: {
            id: id
          }
        })
        .then(res => {
          // res.amount = 1;
          self.product = res;
          this.detailSpinning = false;
          if (self.product.useAmount <= 0) {
            self.btnSetGrey = true;
          } else {
            self.btnSetGrey = false;
          }
        });
    },
    toCartPage() {
      this.$router.push({ path: "/pages/shoppingCart", reLaunch: true });
    }
  }
};
</script>  

<style scoped lang="less">
.root {
  height: 100vh;
  background: #f3f3f3;
  overflow-y: auto;
  .root_son {
    padding: 0 0 60px 0;
    .product_pic {
      width: 100%;
      height: 300px;
    }
    .item_name {
      padding: 5px 0 10px 0;
      overflow: hidden;
      background: #fff;
      display: flex;
      .item_name_outer {
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        h2 {
          font-size: 16px;
          margin-bottom: 5px;
        }
        .pull-right {
          text-align: right;
        }
        .item_name_container {
          display: flex;
          .item_name_body {
            flex: 0.5;
            .item_name_body_item {
              color: #999999;
              margin: 5px 0;
              font-size: 14px;
              .title{
                font-size: 14px;
              }
              .amount {
                .val {
                  font-size: 18px;
                  color: #c89f62;
                  font-weight: 400;
                  margin: 0 10px;
                }
              }
            }
          }
        }
      }
    }
    .profile {
      padding: 5px 0 10px 0;
      .profile_outer {
        background: #fff;
        padding: 10px 10px;
        h2 {
          font-size: 20px;
          border-bottom: 1px solid #f3f3f3;
          padding: 5px 0;
          // font-weight: 700;
        }
        .content {
          // font-size: 12px;
          padding: 10px 0 0 0;
          box-sizing: border-box;
          color: #606060;
        }
      }
    }
    .spend {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: #fff;
      .Shopping_btn {
        text-align: center;
        line-height: 50px;
        .set-grey {
          background: #acacac !important;
        }
        .buy_now {
          padding: 0 15px;
          height: 50px;
          color: #fff;
          background: #c89f62;
        }
        .add_cartbtn {
          padding: 0 15px;
          height: 50px;
          color: #fff;
          background: #009688;
        }
        .btn-become-member {
          padding: 0 15px;
          height: 50px;
          color: #fff;
          background: #daa520;
        }
      }
      .float_left {
        float: left;
      }
      .float_right {
        float: right;
      }
      .addShopping {
        position: relative;
        padding: 10px 5px 0 0;
        margin-left: 10px;
        .shopping_icon {
          width: 35px;
          height: 35px;
        }
        // .shopping_num {
        //   position: absolute;
        //   width: 15px;
        //   height: 15px;
        //   border-radius: 50%;
        //   background: red;
        //   color: #fff;
        //   top: 10px;
        //   right: 0;
        //   font-size: 12px;
        //   text-align: center;
        //   line-height: 15px;
        // }
      }
    }
  }
}
</style>